<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card shadow="always">
          <!-- <div class="title">分值分析</div>
          <rz-height></rz-height>
          <div class="line">
            <div class="left">
              <el-image
                style="width: 100px; height: 100px"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                fit="fill"
              ></el-image>
            </div>
            <div class="right">
                <tips :type="1"></tips>
              <div>{{ data.ztzrScore }}/{{ data.ztzrTotalScore }}分</div>
              <div>得分/总分值</div>
            </div>
          </div>
          <rz-height></rz-height>
          <div class="line">
            <div class="left">
              <el-image
                style="width: 100px; height: 100px"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                fit="fill"
              ></el-image>
            </div>
            <div class="right">
              <div>今日累计扣{{ data.ztzrTrend }}分</div>
            </div>
          </div> -->
          <div class="tips">
            <div class="title">分值分析</div>
            <tips type="1" />
          </div>
          <score-interpretation
            ScoreType="ztzrScore"
            totalScore="ztzrTotalScore"
          ></score-interpretation>
          <div class="red" style="font-size: 13px">
            提示：主体责任为满分百分制占食安指数总分值的40分，此分值为折算后分值；
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card shadow="always">
          <div class="title">近10天主体责任分值分析</div>
          <rz-height></rz-height>
          <div class="food_line"></div>
        </el-card>
      </el-col>
    </el-row>
    <rz-height></rz-height>
    <rz-height></rz-height>
    <!-- <el-row>
      <el-col :span="24">
        <el-card shadow="always">
          <div class="dialog_titel">
            <div class="title">
主体责任记录列表</div>
          </div>
          <rz-height></rz-height>

          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="createTimeStr" label="添加日期" width="180">
            </el-table-column>
            <el-table-column
              prop="reasonReason"
              label="评估原因及理由"
            >
            </el-table-column>
            <el-table-column prop="score" label="扣分分值" width="80">
              <template slot-scope="scope">
                <div>{{ scope.row.score }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="operator" label="操作人" width="100"> </el-table-column>
            <el-table-column prop="source" label="部门名称" width="180"> </el-table-column>
          </el-table>
      <pagination
        :total="total"
        @pagination="recordRindListByCondition"
        :page.sync="query.page"
      />
        </el-card>
      </el-col>
    </el-row> -->

    <el-row>
      <el-col :span="24">
        <el-card shadow="always">
          <div class="dialog_titel">
            <div class="title">主体责任扣分列表</div>
          </div>
          <rz-height></rz-height>
          <el-row>
            <el-col :span="5">
              <el-date-picker
                v-model="buckleQuery.startDate"
                :picker-options="$pickerOptions"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-col>
            <el-col :span="2">
              <el-button
                type="primary"
                @click="
                  buckleQuery.page = 1;
                  recordRindListByConditionBuckle();
                "
                >查询</el-button
              >
            </el-col>
          </el-row>
          <rz-height></rz-height>

          <el-table
            :data="buckleData"
            style="width: 100%"
            border
            v-loading="loading"
          >
            <el-table-column prop="createTimeStr" label="添加日期" width="180">
            </el-table-column>
            <el-table-column prop="reasonReason" label="扣分详情">
            </el-table-column>
            <el-table-column prop="score" label="扣分分值" width="100">
              <template slot-scope="scope">
                <div>{{ scope.row.score }}</div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="buckleTotal"
            @pagination="recordRindListByConditionBuckle"
            :page.sync="buckleQuery.page"
          />
        </el-card>
      </el-col>
    </el-row>
    <rz-height></rz-height>
    <rz-height></rz-height>

    <el-card>
      <div class="title">主体责任落实情况一览</div>
      <rz-height></rz-height>
      <div class="list" v-if="list.length">
        <!-- <div
          class="item"
          v-if="list.some((x) => x.name == '食安承诺书')"
          @click="
            $router.push(list.filter((x) => x.name == '食安承诺书')[0].url)
          "
        >
          <div class="item_wapper">
            <div class="title">食安承诺书</div>
            <div class="text">
              <div
                class="status center green"
                v-if="data.commitmentSignStr == '是'"
              >
                <el-image
                  style="width: 50px; height: 50px"
                  :src="require('@/assets/images/2.png')"
                  fit="fill"
                ></el-image>
                <div>已签署</div>
              </div>
              <div class="status center red" v-else>
                   <el-image
                  style="width: 50px; height: 50px"
                  :src="require('@/assets/images/1.png')"
                  fit="fill"
                ></el-image>
                <div>未签署</div>
                </div>
            </div>
          </div>
        </div> -->

        <div
          class="item"
          v-if="list.some((x) => x.name == '食安制度')"
          @click="$router.push(list.filter((x) => x.name == '食安制度')[0].url)"
        >
          <div class="item_wapper">
            <div class="title">食安制度</div>
            <div class="text">
              <div
                class="status center green"
                v-if="data.systemSignStr == '是'"
              >
                 <el-image
                  style="width: 50px; height: 50px"
                  :src="require('@/assets/images/2.png')"
                  fit="fill"
                ></el-image>
                <div>已上传</div>
                
              </div>
              <div class="status center red" v-else>
                 <el-image
                  style="width: 50px; height: 50px"
                  :src="require('@/assets/images/1.png')"
                  fit="fill"
                ></el-image>
                <div>未上传</div>
                
                </div>
            </div>
          </div>
        </div>

        <div
          class="item"
          v-if="list.some((x) => x.name == '索证索票')"
          @click="$router.push(list.filter((x) => x.name == '索证索票')[0].url)"
        >
          <div class="item_wapper">
            <div class="title">索证索票</div>
            <div>近10天情况</div>
            <div class="text">
              <div class="red">未落实: {{ data.purchaseBillSign }}天</div>
              <div class="green">已落实: {{ data.purchaseBillTotal }}天</div>
            </div>
          </div>
        </div>
        <div
          class="item"
          v-if="list.some((x) => x.name == '岗前检查')"
          @click="$router.push(list.filter((x) => x.name == '岗前检查')[0].url)"
        >
          <div class="item_wapper">
            <div class="title">岗前检查</div>
            <div>近10天情况</div>
            <div class="text">
              <div class="red">未落实: {{ data.preJobInspectionSign }}天</div>
              <div class="green">
                已落实: {{ data.preJobInspectionTotal }}天
              </div>
            </div>
          </div>
        </div>

        <div
          class="item"
          v-if="list.some((x) => x.name == '自查管理') && isZicha"
          @click="
            $router.push(
              list.filter((x) => x.name == '自查管理')[0].url + '?classify=1'
            )
          "
        >
          <div class="item_wapper">
            <div class="title">常规性自查</div>
            <div>近10天情况</div>
            <div class="text">
              <div class="red">未落实: {{ data.routineSelfInspectionSign }}天</div>
              <div class="green">已落实: {{ data.routineSelfInspectionSignYear }}天</div>
            </div>
          </div>
        </div>

        <div
          class="item"
          v-if="list.some((x) => x.name == '自查管理1') && isZicha"
          @click="
            $router.push(
              list.filter((x) => x.name == '自查管理1')[0].url + '?type=1'
            )
          "
        >
          <div class="item_wapper">
            <div class="title">日管控</div>
            <div>近10天情况</div>
            <div class="text">
              <div class="red">未落实: {{ data.dispatchTotalSign }}天</div>
              <div class="green">已落实: {{ data.dispatchTotal }}天</div>
            </div>
          </div>
        </div>
        <div
          class="item"
          v-if="list.some((x) => x.name == '自查管理1') && isZicha"
          @click="
            $router.push(
              list.filter((x) => x.name == '自查管理1')[0].url + '?type=2'
            )
          "
        >
          <div class="item_wapper">
            <div class="title">周排查</div>
            <div>本年度情况</div>
            <div class="text">
              <div class="red">未落实: {{ data.troubleshootingSign }}次</div>
              <div class="green">已落实: {{ data.troubleshootingTotal }}次</div>
            </div>
          </div>
        </div>
        <div
          class="item"
          v-if="list.some((x) => x.name == '自查管理1') && isZicha"
          @click="
            $router.push(
              list.filter((x) => x.name == '自查管理1')[0].url + '?type=3'
            )
          "
        >
          <div class="item_wapper">
            <div class="title">月调度</div>
            <div>本年度情况</div>
            <div class="text">
              <div class="red">未落实: {{ data.controlSign }}次</div>
              <div class="green">已落实: {{ data.controlTotal }}次</div>
            </div>
          </div>
        </div>
        <div
          class="item"
          v-if="list.some((x) => x.name == '自查管理')"
          @click="
            $router.push(
              list.filter((x) => x.name == '自查管理')[0].url + '?classify=2'
            )
          "
        >
          <div class="item_wapper">
            <div class="title">全项目自查</div>
            <div class="text">
              <div>本年度: {{ data.wholeProjectSignYear }}次</div>
              <!-- <div>近十天: {{ data.wholeProjectSign }}次</div> -->
            </div>
          </div>
        </div>
        <div
          class="item"
          v-if="list.some((x) => x.name == '自查管理')"
          @click="
            $router.push(
              list.filter((x) => x.name == '自查管理')[0].url + '?classify=4'
            )
          "
        >
          <div class="item_wapper">
            <div class="title">自查报告</div>
            <!-- <div>近10天情况</div> -->
            <div class="text">
              <div
                class="status center green"
                v-if="data.inspectionReportSignYear > 0"
              >


   <el-image
                  style="width: 50px; height: 50px"
                  :src="require('@/assets/images/2.png')"
                  fit="fill"
                ></el-image>
                <div>已上传</div>
                
              </div>
              <div class="status center red" v-else>
                

   <el-image
                  style="width: 50px; height: 50px"
                  :src="require('@/assets/images/1.png')"
                  fit="fill"
                ></el-image>
                <div>未上传</div>


                </div>
            </div>
          </div>
        </div>

        <div
          class="item"
          v-if="list.some((x) => x.name == '留样管理')"
          @click="$router.push(list.filter((x) => x.name == '留样管理')[0].url)"
        >
          <div class="item_wapper">
            <div class="title">留样管理</div>
            <div>近10天情况</div>
            <div class="text">
              <div class="red">
                未落实: {{ data.retentionManagementSign }}天
              </div>
              <div class="green">
                已落实: {{ data.retentionManagementTotal }}天
              </div>
            </div>
          </div>
        </div>

        <div
          class="item"
          v-if="list.some((x) => x.name == '废弃物处理')"
          @click="
            $router.push(list.filter((x) => x.name == '废弃物处理')[0].url)
          "
        >
          <div class="item_wapper">
            <div class="title">废弃物处理</div>
            <div>近10天情况</div>
            <div class="text">
              <div class="red">未落实: {{ data.wasteDisposalSign }}天</div>
              <div class="green">已落实: {{ data.wasteDisposalTotal }}天</div>
            </div>
          </div>
        </div>

        <div
          class="item"
          v-if="list.some((x) => x.name == '餐具消毒')"
          @click="$router.push(list.filter((x) => x.name == '餐具消毒')[0].url)"
        >
          <div class="item_wapper">
            <div class="title">餐具消毒</div>
            <div>近10天情况</div>
            <div class="text">
              <div class="red">
                未落实: {{ data.tablewareDisinfectionSign }}天
              </div>
              <div class="green">
                已落实: {{ data.tablewareDisinfectionTotal }}天
              </div>
            </div>
          </div>
        </div>

        <!-- <div class="item" v-if="list.some(x=>x.name=='菜谱管理')" @click="$router.push(list.filter(x=>x.name=='菜谱管理')[0].url)">
          <div class="item_wapper">
            <div class="title">菜谱管理</div>
              <div>近10天情况</div>
            <div class="text">
                   <div>未落实: {{ data.tablewareDisinfectionSign }}天</div>
              <div>已落实: {{ data.tablewareDisinfectionTotal }}天</div>
            </div>
          </div>
        </div> -->

        <!-- <div class="item" v-if="list.some(x=>x.name=='食谱管理')" @click="$router.push(list.filter(x=>x.name=='食谱管理')[0].url)">
          <div class="item_wapper">
            <div class="title">食谱管理</div>
              <div>近10天情况</div>
            <div class="text">
              <div>本年度: {{ data.recipeManagementSignYear }}次</div>
              <div>近十天: {{ data.recipeManagementSign }}次</div>
            </div>
          </div>
        </div> -->

        <div
          class="item"
          v-if="list.some((x) => x.name == '培训登记')"
          @click="$router.push(list.filter((x) => x.name == '培训登记')[0].url)"
        >
          <div class="item_wapper">
            <div class="title">培训登记</div>
            <div class="text">
              <div class="center">
                <div class="red" v-if="data.recordCompleteCount == 0">
                  本年度: {{ data.recordCompleteCount }}次
                </div>
                <div class="green" v-else>
                  本年度: {{ data.recordCompleteCount }}次
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          class="item"
          v-if="list.some((x) => x.name == '陪餐管理')"
          @click="$router.push(list.filter((x) => x.name == '陪餐管理')[0].url)"
        >
          <div class="item_wapper">
            <div class="title">陪餐管理</div>
            <div>近10天情况</div>
            <div class="text">
              <div class="red">未落实: {{ data.mealManagementSign }}天</div>
              <div class="green">已落实: {{ data.mealManagementTotal }}天</div>
            </div>
          </div>
        </div>

        <div
          class="item"
          v-if="list.some((x) => x.name == '从业人员')"
          @click="$router.push(list.filter((x) => x.name == '从业人员')[0].url)"
        >
          <div class="item_wapper">
            <div class="title">从业人员</div>
            <div class="text">
              <div class="green">绿码: {{ data.codeGreen }}人</div>
              <div class="yellow">黄码: {{ data.codeYellow }}人</div>
              <div class="red">红码: {{ data.codeRed }}人</div>
            </div>
          </div>
        </div>

        <div
          class="item"
          v-if="list.some((x) => x.name == '责任任命')"
          @click="$router.push(list.filter((x) => x.name == '责任任命')[0].url)"
        >
          <div class="item_wapper">
            <div class="title">责任任命</div>
            <div class="text">
              <div :class="[data.isHaveDirector ? 'green' : 'red']">
                企业负责人: {{ data.isHaveDirector ? "已签署" : "未签署" }}
              </div>
              <div :class="[data.isHaveChiefInspector ? 'green' : 'red']">
                食品安全总监:
                {{ data.isHaveChiefInspector ? "已签署" : "未签署" }}
              </div>
              <div :class="[data.isHaveFoodSafetyOfficer ? 'green' : 'red']">
                食品安全员:
                {{ data.isHaveFoodSafetyOfficer ? "已签署" : "未签署" }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
var echarts = require("echarts");
import {
  findTask,
  recordRindListByCondition,
  findListByConditionSafety,
} from "@/api/modules/interpretation";
import {
  CompanyMainPageInfo,
  findByBodyIndustry,
} from "@/api/modules/enterprise";
import addDialog from "@/views/interpretation/components/addDialog";
import tips from "@/views/interpretation/components/tips";
import scoreInterpretation from "@/views/interpretation/components/scoreInterpretation";

export default {
  // props:[],
  // 页面加载
  created() {
    this.buckleQuery.startDate = this.$moment()
      .subtract(1, "days")
      .format("YYYY-MM-DD");
    // this.getList();
    // this.recordRindListByCondition();
    this.findListByConditionSafety();
    this.recordRindListByConditionBuckle();
    this.findTask();
    this.getCompanyMainPageInfo();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      // tableData: [],
      // data: {},
      recordList: [],
      // query: {
      //   category: 2,
      //   endDate: "",
      //   fsuperviseunitId: sessionStorage.getItem("interpretation"),
      //   isPage: 0,
      //   page: 1,
      //   pageSize: 10,
      //   startDate: "",
      //   type: 1,
      // },
      buckleQuery: {
        category: 2,
        endDate: "",
        fsuperviseunitId: sessionStorage.getItem("interpretation"),
        isPage: 0,
        page: 1,
        pageSize: 10,
        startDate: "",
        type: 1,
      },
      buckleData: [],
      bodyIndustryData: {},
      // total: 0,
      buckleTotal: 0,
      loading: false,
      data: {},
      list: [],
      isZicha: true,
    };
  },
  // 方法
  methods: {
    // getList() {
    //   findByFSuperviseunitId({
    //     params: {
    //       fSuperviseunitId: sessionStorage.getItem("interpretation"),
    //     },
    //   }).then((res) => {
    //     this.data = res.data;
    //   });
    // },
    // recordRindListByCondition() {
    //   recordRindListByCondition(this.query).then((res) => {
    //     console.log(res);
    //     this.tableData = res.data;
    //     this.total=res.totalCount
    //     // this.lineInit();
    //   });
    // },
    recordRindListByConditionBuckle() {
      if (!this.buckleQuery.startDate) {
        this.buckleQuery.startDate = "";
      }
      this.buckleQuery.endDate = this.buckleQuery.startDate;
      this.loading = true;
      recordRindListByCondition(this.buckleQuery).then((res) => {
        this.buckleData = res.data;
        this.loading = false;
        this.buckleTotal = res.totalCount;
      });
    },
    lineInit() {
      let chartDom = document.querySelector(".food_line");
      let myChart = echarts.init(chartDom);
      let option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "5%",
          right: "8%",
          bottom: "3%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.recordList.map((x) => x.createTimeStr).reverse(),
          axisLabel: {
            //底部文字倾斜
            interval: 0,
            rotate: 25,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "主体责任",
            data: this.recordList.map((x) => x.ztzrScore).reverse(),
          },
        ],
      };
      myChart.setOption(option);
    },
    findListByConditionSafety() {
      findListByConditionSafety({
        fSuperviseunitId: sessionStorage.getItem("interpretation"),
        indexYear: new Date().getFullYear(),
        startDate: this.$moment().subtract(10, "day").format("YYYY-MM-DD"),
        endDate: this.$moment().format("YYYY-MM-DD"),
        isReverseTimeOrder: "1",
      }).then((res) => {
        this.recordList = res.data;
        this.lineInit();
      });
    },
    findTask() {
      findTask({
        id: sessionStorage.getItem("interpretation"),
      }).then((res) => {
        this.data = res.data[0];
      });
    },

    getCompanyMainPageInfo() {
      // 改业态
      CompanyMainPageInfo({
        params: {
          id: sessionStorage.getItem("interpretation"),
        },
      }).then((res) => {
        // let bodyindustryremarks = "";
        // if (res.data.bodyindustryremarks.includes("托育（托幼）")) {
        //   bodyindustryremarks = "幼托机构食堂";
        // } else if (
        //   res.data.bodyindustryremarks.includes("学校") ||
        //   res.data.bodyindustryremarks == "高等教育机构" ||
        //   res.data.bodyindustryremarks.includes("中学机构(初、高中)") ||
        //   res.data.bodyindustryremarks == "中等职业教育机构" ||
        //   res.data.bodyindustryremarks == "小学机构"
        // ) {
        //   bodyindustryremarks = "学校食堂";
        // } else if (
        //   res.data.bodyindustryremarks.includes("集体用餐") ||
        //   res.data.bodyindustryremarks.includes("中央厨房")
        // ) {
        //   bodyindustryremarks = "集体用餐配送或中央厨房";
        // } else if (res.data.bodyindustryremarks == "医院食堂") {
        //   bodyindustryremarks = "机关企事业单位食堂";
        // } else if (res.data.bodyindustryremarks == "机关单位食堂") {
        //   bodyindustryremarks = "机关企事业单位食堂";
        // } else {
        //   bodyindustryremarks = res.data.bodyindustryremarks;
        // }

        if (
          res.data.bodyindustry == "食品生产企业" ||
          res.data.bodyindustry == "食品销售经营者" ||
          res.data.bodyindustry == "食品流通经营者"
        ) {
          this.isZicha = false;
        }
        this.bodyIndustryData = res.data;
        this.getBodyIndustry({
          bodyindustry: res.data.bodyindustry,
            bodyindustryremarks:res.data.bodyindustryremarks1,
          isspecialfood: res.data.isspecialfood,
        });
      });
    },
    getBodyIndustry(data) {
      findByBodyIndustry(data).then((res) => {
        this.list = res.data
          .filter(
            (x) => x.moduleId !== "2021001" && x.moduleId !== "2021002"
            // x.moduleId !== "2021013"
          )
          .filter((x) => x.parentId == 0);
        if (this.bodyIndustryData.label) {
          res.data.forEach((x) => {
            if (x.moduleId == "2021007") {
              x.modulePathUrl = "/enterprise/pages/inspect/inspect/inspect";
              x.moduleName = "自查管理1";
            }
          });

          this.list.push({
            accordingRequirements:
              "依据《中华人民共和国食品安全法》规章要求实施细则;",
            bodyIndustry: "单位食堂",
            bodyIndustryId: "2021017",
            bodyIndustryRemarks: "学校食堂",
            createTime: "2021-10-19",
            frequencyNumber: 0,
            frequencyType: 6,
            functionScore: 0,
            id: "1172272220228026383",
            isSpecialFood: 0,
            isTaskItem: 0,
            moduleFullName: "责任任命",
            moduleId: "2021125",
            moduleName: "责任任命",
            moduleSort: 2,
            remark: "",
            modulePathUrl:
              "/enterprise/pages/responsibility/responsibility/responsibility",
            updateTime: "2021-10-21",
          });
        }
        this.list = this.list.map((x) => ({
          name: x.moduleName,
          url: x.modulePathUrl,
        }));
      });
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    "add-dialog": addDialog,
    "score-interpretation": scoreInterpretation,

    tips,
  },
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
// .line {
//   display: flex;
//   background-color: #99cc66;
//   color: #fff;
//   .left {
//     width: 100px;
//     height: 100px;
//     background-color: red;
//   }
//   .right {
//       position: relative;
//     display: flex;
//     padding-left: 20px;
//     justify-content: space-evenly;
//     flex: 1;
//     align-items: flex-start;
//     flex-direction: column;
//   }
// }
.tips {
  position: relative;
}
.dialog_titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title {
  font-size: 20px;
  font-weight: 700;
}
.food_line {
  height: 240px;
  width: 100%;
}
.list {
  display: flex;

  flex-wrap: wrap;
  .item {
    padding: 10px;
    width: 200px;
    //  flex: 1;
    height: 130px;
    cursor: pointer;
    color: #000;
    .item_wapper {
      padding: 15px;
      height: 100%;
      font-size: 13px;
      // background-color: linear-gradient(#72BBFF, #);

      // background-image: linear-gradient(to right, #72BBFF , #1D92FF);
      border: 2px solid #1d92ff;
      display: flex;
      flex-direction: column;
      position: relative;
      .title {
        font-size: 16px;
        // color: #fff;
        font-weight: 700;
        position: absolute;
        top: -8px;
        left: 15px;
        background-color: #fff;
        padding: 0 20px;
      }
      .status {
        // padding-left: 20px;
        font-size: 16px;
        font-weight: 700;
      }
      .text {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        font-size: 14px;
        font-weight: 700;
      }
      .center {
        text-align: center;
      }
    }
  }
}
</style>